<template>
  <!-- 在用户个人空间中 ，点击课程后的详细页面展示，应该包括多个学习章节，课程资料等等 -->
  <div>
    <el-container class="course-container" id="course-container" >
      <el-header class="course-header" >
        <course-header :courseId="courseId"></course-header>
      </el-header>
      <el-container>
        <el-aside class="course-aside">
          <course-aside :courseId="courseId"></course-aside>
        </el-aside>
        <el-main class="course-main">
          <el-card class="main-box">
            <router-view></router-view>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import CourseHeader from "../../components/CourseHeader.vue";
import CourseAside from "../../components/CourseAside.vue";
import { useRoute } from "vue-router";
export default {
  name: "CourseDetail",
  components: {
    CourseHeader,
    CourseAside,
  },
  // 数据源
  data() {
    return {
      courseId: "",
      courseDetail: {},
    };
  },
  created() {
    //将捕获到的参数进行首次保存（课程ID）
    this.courseId = this.getParams();
  },
  //生命周期函数---
  mounted() {},
  //基本方法
  methods: {
    getParams() {
      const route = useRoute();
      let courseId = route.query.courseId;
      return courseId;
    },
    //获取课程详细信息 子组件进行分发共享
  },
  //计算类型方法和其他方法的区别：有缓存。以内存换时间，适用于频繁使用的计算
  computed: {},
};
</script>

<style   scoped>
.course-container {
  background: rgb(238, 238, 238);
}
.course-aside {
  margin-top: 30px;
}
.course-main {
  margin-top: 30px;
}
.main-box {
  min-height: 800px;
  width: 98%;
  background: #ffffff;
}

</style>